<div id='trace-controls' class='row well well-sm'>
  <ul class='nav nav-pills'>
    <li class=''><a href='#'><strong>Duration:</strong> <span class='badge'>{{duration}}</span></a></li>
    <li class=''><a href='#'><strong>Services:</strong> <span class='badge'>{{services}}</span></a></li>
    <li class=''><a href='#'><strong>Depth:</strong> <span class='badge'>{{depth}}</span></a></li>
    <li class=''><a href='#'><strong>Total Spans:</strong> <span class='badge'>{{totalSpans}}</span></a></li>
    <li class='navbar-right'><a href='/api/v1/trace/{{ traceId }}' id='traceJsonLink'><span class='btn btn-primary btn-xs badge'>JSON</span></a></li>
  </ul>

  <form class='form-inline' role='form'>
    <div class='btn-group btn-group-sm' id='filterAllServices'>
      <button type='button' class='btn btn-default' value='uiExpandAllSpans'>Expand All</button>
      <button type='button' class='btn btn-default active' value='uiCollapseAllSpans'>Collapse All</button>
    </div>
    <select data-placeholder='Filter Service Search' class='form-control input-sm' name='serviceFilterSearch' id='serviceFilterSearch'>
      <option value=''></option>
      {{#serviceCounts}}
      <option value='{{name}}'>{{name}}</option>
      {{/serviceCounts}}
    </select>
  </form>

  <div class='trace-details services'>
  {{#serviceCounts}}
    <span class='label label-default service-filter-label' data-service-name='{{name}}'>{{name}} x{{count}}</span>
  {{/serviceCounts}}
  </div>
</div>

<div class='row' id='trace-container'>
  <div id='timeLabel' class='span'>
    <div class='handle'>Services</div>
    <div class='duration-container'>
      {{#timeMarkers}}
      <div class='time-marker time-marker-{{index}}'>{{time}}</div>
      {{/timeMarkers}}
    </div>
  </div>

  {{#spans}}
  <div
    id='{{spanId}}'
    class='span service-span depth-{{depthClass}}'
    data-keys='id,spanName,serviceNames,serviceName,durationStr,duration'
    data-id='{{spanId}}'
    data-parent-id='{{parentId}}'
    data-span-name='{{spanName}}'
    data-service-name='{{serviceName}}'
    data-service-names='{{serviceNames}}'
    data-duration-str='{{durationStr}}'
    data-duration='{{duration}}'
    data-children='{{children}}'
    data-error-type='{{errorType}}'
  >
    <div class='handle'>
      <div class='service-name' style='margin-left: {{depth}}px'>
        <span class='expander'>+</span>
        {{serviceName}}
      </div>
    </div>

    <div class='duration-container'>
      {{#timeMarkers}}
      <div class='time-marker time-marker-{{index}}'>.</div>
      {{/timeMarkers}}

      <div class='duration' style='left: {{left}}%; width: {{width}}%'>
        {{durationStr}} : {{spanName}}
        {{#annotations}}
        <div class='annotation{{#isCore}} core{{/isCore}}'
          style='left: {{left}}%; width: {{width}}px'
          title='{{value}}'
          data-keys='endpoint,value,timestamp,relativeTime,serviceName'
          data-endpoint='{{endpoint}}'
          data-value='{{value}}'
          data-timestamp='{{timestamp}}'
          data-relative-time='{{relativeTime}}'
          data-service-name='{{serviceName}}'
        ></div>
        {{/annotations}}
      </div>
    </div>

    {{#binaryAnnotations}}
    <div class='binary-annotation'
      data-keys='key,value,type'
      data-key='{{key}}'
      data-value='{{value}}'
      data-type='{{annotationType}}'
    ></div>
    {{/binaryAnnotations}}
  </div>
  {{/spans}}
</div>

<div class='modal fade' id='spanPanel'>
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h4 class='modal-title'></h4>
        <h5>AKA: <span class='service-names'></span></h5>
      </div>
      <div class='modal-body'>
        <table id='annotations' class='table table-striped'>
          <thead><tr>
            <th>Date Time</th>
            <th>Relative Time</th>
            <th>Annotation</th>
            <th>Address</th>
          </tr></thead>
          <tbody>
            <tr>
              <td data-key='timestamp' class="local-datetime"></td>
              <td data-key='relativeTime'></td>
              <td data-key='value'></td>
              <td data-key='endpoint'></td>
            </tr>
          </tbody>
        </table>

        <table id='binaryAnnotations' class='table table-striped'>
          <thead><tr>
            <th>Key</th>
            <th>Value</th>
          </tr></thead>
          <tbody>
            <tr>
              <td class='key' data-key='key'></td>
              <td class='value' data-key='value'></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class='row  hidden' id='trace-container-backup'>
  <div id='timeLabel-backup' class='span'>
    <div class='handle'>Services</div>
    <div class='duration-container'>
      {{#timeMarkersBackup}}
      <div class='time-marker time-marker-{{index}}'>{{time}}</div>
      {{/timeMarkersBackup}}
    </div>
  </div>

  {{#spansBackup}}
  <div
    id='{{spanId}}'
    class='span service-span depth-{{depthClass}}'
    data-keys='id,spanName,serviceNames,serviceName,durationStr,duration'
    data-id='{{spanId}}'
    data-parent-id='{{parentId}}'
    data-span-name='{{spanName}}'
    data-service-name='{{serviceName}}'
    data-service-names='{{serviceNames}}'
    data-duration-str='{{durationStr}}'
    data-duration='{{duration}}'
    data-children='{{children}}'
  >
    <div class='handle'>
      <div class='service-name' style='margin-left: {{depth}}px'>
        <span class='expander'>+</span>
        {{serviceName}}
      </div>
    </div>

    <div class='duration-container'>
      {{#timeMarkersBackup}}
      <div class='time-marker time-marker-{{index}}'>.</div>
      {{/timeMarkersBackup}}

      <div class='duration' style='left: {{left}}%; width: {{width}}%'>
        {{durationStr}} : {{spanName}}
        {{#annotations}}
        <div class='annotation{{#isCore}} core{{/isCore}}'
          style='left: {{left}}%; width: {{width}}px'
          title='{{value}}'
          data-keys='endpoint,value,timestamp,relativeTime,serviceName'
          data-endpoint='{{endpoint}}'
          data-value='{{value}}'
          data-timestamp='{{timestamp}}'
          data-relative-time='{{relativeTime}}'
          data-service-name='{{serviceName}}'
        ></div>
        {{/annotations}}
      </div>
    </div>

    {{#binaryAnnotations}}
    <div class='binary-annotation'
      data-keys='key,value,type'
      data-key='{{key}}'
      data-value='{{value}}'
      data-type='{{annotationType}}'
    ></div>
    {{/binaryAnnotations}}
  </div>
  {{/spansBackup}}
</div>

<div class='modal fade' id='jsonPanel'>
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <a href='#' class='save'><span class='glyphicon glyphicon-save' aria-hidden='true' aria-label='save'></span></a>
        <h4 class='modal-title'></h4>
      </div>
      <div class='modal-body'>
        <pre></pre>
      </div>
    </div>
  </div>
</div>

